<template>
    <div class="layout">
        <div class="login_top">
            <div class="login_top_img">
                <img src="@/assets/login/login_log.png" alt="" />
            </div>
            <p class="login_top_border"></p>
            <p class="login_top_text">用客易达连接客户</p>
        </div>

        <el-card v-if="isSuccess" v-loading="loading" shadow="never">
            <div class="tobindmessage">
                <span>
                    <el-icon color="#409EFF"><InfoFilled /></el-icon>
                    <span>您的店铺尚未与客易达系统账号进行绑定，请绑定后再使用。</span>
                </span>
                <span class="tobind" @click="goAddVideoShop">
                    <span>立即绑定</span>
                    <el-icon><DArrowRight /></el-icon>
                </span>
            </div>

            <div class="store-info">
                <div class="store-info-title">
                    <span>恭喜你，已成功订购 客易达_视频号小店订单通</span>
                </div>
                <el-form label-width="auto">
                    <el-form-item label="店铺名称">
                        {{ renderText(detailInfo.nickname) }}
                    </el-form-item>
                    <el-form-item label="店铺类型">
                        {{ renderText(detailInfo.subject_type) }}
                    </el-form-item>
                    <el-form-item label="店铺头像">
                        <el-image class="headimg" :src="detailInfo.headimg_url"></el-image>
                    </el-form-item>
                    <el-form-item label="服务过期时间">
                        {{ renderText(detailInfo.expire_time) }}
                    </el-form-item>
                </el-form>
            </div>
            <el-divider border-style="dashed" />
            <div>
                <el-image class="service" src="//static.scrm.keyid.cn/assets/images/global/service.png"></el-image>
                <div class="tip">
                    <span>如有更多问题，请联系客服咨询。</span>
                </div>
            </div>
        </el-card>
        <el-card v-else shadow="never">
            <el-result :title="errCode" :sub-title="subTitle">
                <template #icon>
                    <el-image class="error-image" src="/static/noData.png" />
                </template>
                <template #extra>
                    <el-button type="primary">
                        <span @click="toHome">返回首页</span>
                    </el-button>
                </template>
            </el-result>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import router from '@/router';
import { get } from 'lodash';
import { getWxVshopInfoNotToken } from '@/api/ecommerce/storeManage';
const routers = useRoute();

const detailInfo = reactive<IDetailInfo>({});
const errCode = ref('404');

const isSuccess = ref<boolean>(true);
const subTitle = ref('');
const loading = ref(true);
const getShopInfo = async () => {
    try {
        const params = { code: routers.query.code };
        const res = await getWxVshopInfoNotToken(params);
        Object.assign(detailInfo, res);
        isSuccess.value = true;
    } catch (err: any) {
        subTitle.value = get(err, 'msg', err);
        errCode.value = get(err, 'code', '404');
        isSuccess.value = false;
    } finally {
        loading.value = false;
    }
};

const renderText = (text?: string) => text || '-';

const goAddVideoShop = () => {
    router.push({
        path: '/ecommerce/storeManage/list/addVideoNumberStore',
        query: {
            shop_id: detailInfo.external_shop_id
        }
    });
};

const toHome = () => {
    router.push({
        path: '/home'
    });
};

onMounted(() => {
    getShopInfo();
});

interface IDetailInfo {
    external_shop_id?: string;
    nickname?: string;
    headimg_url?: string;
    subject_type?: string;
    expire_time?: string;
}
</script>
<style lang="scss" scoped>
.tobindmessage {
    color: #33302d;
    font-size: 14px;
    padding: 6px 12px;
    display: inline-block;
    border: 1px solid #79bbff;
    background-color: #ecf5ff;
    > span:first-child {
        .el-icon {
            margin-right: 6px;
        }
    }
    .el-icon {
        vertical-align: text-top;
        line-height: 20px;
        height: 20px;
    }
    .tobind {
        cursor: pointer;
        color: #337ecc;
    }
}

.store-info {
    margin-top: 16px;
    .store-info-title {
        font-size: 18px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
    }
    .el-form {
        margin-top: 18px;
        display: inline-block;
        min-width: 260px;
        text-align-last: left;
        .headimg {
            width: 140px;
            height: 140px;
        }
    }
}
.service {
    width: 180px;
    height: 180px;
}
.tip {
    font-size: 14px;
    color: #666;
}
.el-divider {
    margin: 18px 0;
}
.error-image {
    margin-left: 32px;
}
.el-card {
    position: relative;
    margin: 30px 60px;
    text-align: center;
    padding: 30px;
    box-sizing: border-box;
    overflow: auto;
    height: calc(100vh - 140px);
}

.layout {
    width: 100%;
    background: url('../../../assets/login/register_bg.png');
    background-size: 100%;
    .login_top {
        height: 60px;
        display: flex;
        align-items: center;
        background: #ffff;
        &_img {
            width: 95px;
            height: 23px;
            margin-left: 40px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        &_border {
            height: 20px;
            margin: 0 14px;
            border-left: 1px solid #d0d0d0;
        }
        &_text {
            font-size: 14px;
            line-height: 14px;
            color: #33302d;
        }
    }
    .container {
        width: 950px;
        height: 830px;
        margin: 40px auto 0;
        background: #ffff;
        &_top {
            .container_header {
                width: 100%;
                height: 137px;
                text-align: center;
                background: url('../../../assets/login/register1_bg.png') no-repeat;
                background-size: cover;
                color: #ffffff;
                &_title {
                    font-size: 28px;
                    line-height: 28px;
                    display: block;
                    padding: 40px 0 12px;
                }
                &_text {
                    display: block;
                    font-size: 14px;
                    line-height: 14px;
                }
            }
        }
    }
}
:deep(.el-result) {
    margin-top: 8%;
}
</style>
